<script setup>
import useOrderStore from '@/store/order'
import {computed, ref, toRefs} from 'vue'
import OrderDetailList from '@/views/main/order/cpn/order-detail-list/order-detail-list.vue'
import {formatRegion} from '@/utils/string'

//接收参数
const props = defineProps(['order'])

//判定加载状态
const isLoading = ref(true)

//订单详情数据
const orderDetail = ref({})
const address = computed(() => orderDetail.value?.address)
const userInfo = computed(() => orderDetail.value?.userInfo)
const commoditys = computed(() => orderDetail.value?.commoditys)

//获取订单详情
const orderStore = useOrderStore()
orderStore.fetchOrderDetailAction(props.order).then((res) => {
  isLoading.value = false
  orderDetail.value = res
})
</script>

<template>
  <div class="order-detail" v-loading="isLoading">
    <template v-if="!isLoading">
      <!-- 用户信息 -->
      <el-descriptions title="订单详情">
        <el-descriptions-item label="账号">{{ userInfo?.account }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ address?.telephone }}</el-descriptions-item>
        <el-descriptions-item label="收货名">{{ address?.shopping_name }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{ formatRegion(address?.region) }}{{ address?.address }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 农品信息 -->
      <el-descriptions title="农品列表">
        <el-descriptions-item>
          <order-detail-list :order-commodities="commoditys"/>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.order-detail {
  padding: $spacing-2;
}
</style>
